import React, { useState } from 'react';
import useStore from '../../components/useStore';
import { Row, Col, Upload, Button, Divider, Card, Progress, message } from 'antd';
import { 
  UploadOutlined, 
  DownloadOutlined, 
  FileTextOutlined, 
  DatabaseOutlined, 
  CodeOutlined, 
  PictureOutlined, 
  LinkOutlined 
} from '@ant-design/icons';
import store from '../../untils/store';

const GetDocument = () => {
  const { collapsed } = useStore();
  const { localUrl } = store();
  const [uploadProgress, setUploadProgress] = useState({});
  const [uploadStatus, setUploadStatus] = useState({});

  // 文档类型配置
  const documentTypes = [
    {
      id: 1,
      name: '软件开发文档',
      fileName: '软件开发文档.docx',
      accept: '.doc,.docx,.pdf',
      icon: <FileTextOutlined />
    },
    {
      id: 2,
      name: '数据库文档',
      fileName: '数据库文档.docx',
      accept: '.doc,.docx,.pdf',
      icon: <DatabaseOutlined />
    },
    {
      id: 3,
      name: 'mysql数据库sql脚本',
      fileName: 'mysql数据库sql脚本.sql',
      accept: '.sql',
      icon: <CodeOutlined />
    },
    {
      id: 4,
      name: 'icon文件',
      fileName: 'icon.js',
      accept: '.js',
      icon: <LinkOutlined />
    },
    {
      id: 5,
      name: '数据库关系图',
      fileName: '数据库关系图.drawio',
      accept: '.drawio',
      icon: <PictureOutlined />
    }
  ];

  // 处理上传进度
  const handleUploadProgress = (type, percent) => {
    setUploadProgress(prev => ({ ...prev, [type]: percent }));
  };

  // 处理上传变化
  const handleUploadChange = (info, type) => {
    if (info.file.status === 'uploading') {
      handleUploadProgress(type, info.file.percent);
      setUploadStatus(prev => ({ ...prev, [type]: 'uploading' }));
      return;
    }

    if (info.file.status === 'done') {
      setUploadStatus(prev => ({ ...prev, [type]: 'done' }));
      message.success(`${documentTypes.find(d => d.id === type)?.name} 上传成功`);
      
      // 3秒后清除进度条
      setTimeout(() => {
        setUploadProgress(prev => ({ ...prev, [type]: 0 }));
      }, 3000);
    }

    if (info.file.status === 'error') {
      setUploadStatus(prev => ({ ...prev, [type]: 'error' }));
      message.error(`${documentTypes.find(d => d.id === type)?.name} 上传失败`);
    }
  };

  return (
    <div 
      style={{
        backgroundColor: "#f5f7fa",
        right: "1%",
        top: "6vh",
        overflow: "auto",
        width: collapsed ? "94%" : "84%",
        position: "absolute",
        borderRadius: "8px",
        padding: "24px",
        boxSizing: "border-box"
      }}
    >
      <div className="document-header">
        <h2 style={{
          color: "#1890ff",
          fontSize: "20px",
          marginBottom: "12px",
          fontWeight: 600
        }}>
          文档管理
        </h2>
        <p style={{
          color: "#666",
          fontSize: "14px",
          lineHeight: "1.6",
          marginBottom: "16px",
          paddingLeft: "4px"
        }}>
          上传的旧文档将覆盖新文档，且上传限制最大为10MB。支持的格式已在对应上传按钮处标注。
        </p>
        <Divider />
      </div>

      {/* 文档卡片网格 */}
      <Row gutter={[24, 24]} style={{ width: "100%" }}>
        {documentTypes.map((doc) => (
          <Col 
            key={doc.id} 
            span={8} 
            style={{ display: "flex" }}
          >
            <Card 
              style={{
                width: "100%",
                transition: "all 0.3s ease",
                borderRadius: "8px",
                border: "1px solid #e8e8e8"
              }}
              hoverable
            >
              <div style={{
                display: "flex",
                alignItems: "center",
                marginBottom: "16px",
                paddingBottom: "12px",
                borderBottom: "1px dashed #e8e8e8"
              }}>
                <span style={{
                  fontSize: "20px",
                  color: "#1890ff",
                  marginRight: "12px"
                }}>
                  {doc.icon}
                </span>
                <h3 style={{
                  fontSize: "16px",
                  color: "#333",
                  margin: 0,
                  fontWeight: 500
                }}>
                  {doc.name}
                </h3>
              </div>
              
              <div style={{
                display: "flex",
                gap: "12px",
                alignItems: "center"
              }}>
                <a 
                  href={`${localUrl}${doc.fileName}`} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  style={{ flex: 1 }}
                >
                  <Button 
                    icon={<DownloadOutlined />}
                    style={{
                      width: "100%",
                      backgroundColor: "#f0f2f5",
                      color: "#333",
                      border: "none"
                    }}
                    hoverStyle={{
                      backgroundColor: "#e5e6eb",
                      color: "#1890ff"
                    }}
                  >
                    下载
                  </Button>
                </a>
                
                <Upload
                  action="/admin/dev/putDocument"
                  method="POST"
                  data={{ type: doc.id }}
                  name="file"
                  accept={doc.accept}
                  maxCount={1}
                  showUploadList={false}
                  onChange={(info) => handleUploadChange(info, doc.id)}
                >
                  <Button 
                    icon={<UploadOutlined />}
                    style={{
                      flex: 1,
                      backgroundColor: "#1890ff",
                      color: "#ffffff",  // 明确设置文字颜色
                      borderColor: "#1890ff",
                      fontWeight: 500,  // 增加字体权重
                      boxShadow: "0 2px 4px rgba(24, 144, 255, 0.2)"  // 增加轻微阴影
                    }}
                    hoverStyle={{
                      backgroundColor: "#096dd9",
                      borderColor: "#096dd9",
                      color: "#ffffff",  // 悬停时保持白色文字
                      boxShadow: "0 4px 8px rgba(9, 109, 217, 0.3)"  // 增强悬停阴影
                    }}
                    loading={uploadStatus[doc.id] === 'uploading'}
                  >
                    上传
                  </Button>
                </Upload>
              </div>
              
              {/* 上传进度条 */}
              {uploadProgress[doc.id] > 0 && (
                <Progress 
                  percent={uploadProgress[doc.id]} 
                  size="small"
                  status={
                    uploadStatus[doc.id] === 'error' ? 'exception' : 
                    uploadStatus[doc.id] === 'done' ? 'success' : 'active'
                  }
                  style={{
                    marginTop: "16px",
                    width: "100%"
                  }}
                />
              )}
            </Card>
          </Col>
        ))}
      </Row>
      
      <Divider style={{ marginTop: "24px" }} />
    </div>
  );
};

export default GetDocument;
